<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Resize</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var redPath = new Path.Circle({
            center: view.center,
            radius: 5,
            fillColor: 'red'
        });

        var whitePath = new Path.Circle({
            center: view.center,
            radius: 5,
            fillColor: 'white'
        });

        var text = new PointText({
            content: 'Resize your window',
            justification: 'center',
            point: view.center
        });

        function onResize(event) {
            // Resize the red circle to fill the bounds of the view:
            redPath.fitBounds(view.bounds, true);

            // Resize the white circle to fit within the bounds of the view:
            whitePath.fitBounds(view.bounds, false);

            // Move the text to the center of the view:
            text.position = view.bounds.center;
        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
</body>
</html>
